<script>
    $(document).ready(function() {
        idimgglobal = 0;
        /******************************************************************/
        //IMAGENES
        /******************************************************************/
        //MOSTRAR TABLA ACTUAL
        mostrarDatos();
        //SELECCION DEL COMBOBOX ON CHANGE  ADD
        $("#list-producto").change(function() {
            var opcion = $("#select-producto").val();
            $("#addproinput").val(opcion);
        });
        //SELECCION DEL COMBOBOX ON CHANGE  EDIT
        $("#list-producto2").change(function() {

            var opcion1 = $("#select-producto2").val();

            $("#editproinput").val(opcion1);

        });

        //ocultar barras de progreso
        $("#prog").hide();
        $("#progedit").hide();

        //declarar classes como button
        $(".botones").button();
        $(".subir").button();
        $("#imagenefile").button();
        //OPEN DIV NUEVA IMAGEN BUTTON
        //-----------------------------------
        $("#adddiv").click(function() {
            $("#formimagene").trigger("reset");
            llenarlistboxproductos(true);
            $("#divimagene").dialog("open");

        });
        //OPEN DIV EDIT IMAGEN 
        //-------------------------------------
        //LLENO EL EDITAR CON DATOS EXISTENTES
        $(document).on("click", ".editar", function() {
            idimgglobal = $(this).attr('data-id');
            $("formedit").trigger("reset");

            var filename = "";
            var producto_id = "";
            $.ajax({
                url: 'http://localhost:26/ecomerce/Imagenes/view/' + idimgglobal,
                dataType: 'json',
                type: "POST",
                success: function(data) {
                    $.each(data, function(item2) {
                        filename = data[item2].filename;
                        producto_id = data[item2].producto_id;
                    });
                  
                    $("#editfileinput").val(filename);
                    $("#editproinput").val(producto_id);
                    $("#editimagenefile").val("");
                    llenarlistboxproductos(false);
                    $("#editarimagene").dialog("open");
                },
                error: function() {
                    alert("No Existe esta imagen");
                }
            });

        });

        /****************************************************/
        /****************************************************/
        //DECLARACION DIALOG DIV AGREGAR Y EDITAR IMAGENES
        $("#divimagene").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#divimagene').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        $("#editarimagene").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#editarimagene').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        //SELECCION DE IMAGENES AGREGAR 
        $('#imagenefile').change(function() {
            var fileName = $('#imagenefile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#filenamehidd").val(clean);

        });
        //SELECCION DE IMAGENES EDITAR
        /****************************************************/
        $('#editimagenefile').change(function() {
            var fileName = $('#editimagenefile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#editfileinput").val(clean);

        });
        /****************************************************/
        //GUARDAR BUTTON ADD DIALOG
        $("#subir").click(function(e) {
            e.preventDefault();
                     $.ajax({
                url: "http://localhost:26/ecomerce/Imagenes",
                type: "POST",
                data: $("#formimagene").serialize(),
                success: function() {
                    if ($("#imagenefile").val()) {
                        $("#prog").show();
                        //LUEGO DE AGREGAR LA CATEGORIA SE SUBE LA IMAGEN CORRESPONDIENTE
                        $("#imagenefile").upload("http://localhost:26/ecomerce/Imagenes/subirimagen", function(e) {
                            $("#respuesta").html(e);
                            mostrarDatos();
                            alert("Agregada con exito");
                            $("#divimagene").dialog("close");
                            $("#prog").hide();
                        }, $("#prog"));

                    } else {
                        mostrarDatos();
                        alert("Agregada con exito pero sin imagen");
                        $("#divimagene").dialog("close");
                    }
                },
                error: function() {
                    alert("No fue agregado");
                }
            });

        });
        /****************************************************/
        /****************************************************/
        //EDITAR  BUTTON DIALOG
        $("#editarbutton").click(function(e) {
            e.preventDefault();
            $.ajax({
                url: 'http://localhost:26/ecomerce/Imagenes/edit/' + idimgglobal,
                type: "POST",
                data: $("#formedit").serialize(),
                success: function() {
                    if ($("#editimagenefile").val()) {
                        $("#progedit").show();

                        //LUEGO DE AGREGAR LA IMAGEN SE SUBE LA IMAGEN CORRESPONDIENTE
                        $("#editimagenefile").upload("http://localhost:26/ecomerce/Imagenes/subirimagen", function(e) {
                            $("#respuestaedit").html(e);
                            mostrarDatos();
                            alert("Editado con exito");
                            $("#editarimagene").dialog("close");
                            $("#progedit").hide();
                            $("#respuestaedit").html("");

                        }, $("#progedit"));

                    } else {
                        alert("Editado con exito");
                        mostrarDatos();
                        $("#editarimagene").dialog("close");
                    }
                }
            });

        });
        /****************************************************/
        /****************************************************/
        //ELIMINAR BUTTON 
        $(document).on("click", ".delete", function(e) {
            e.preventDefault();

            var idimg = $(this).attr('data-id');
            $.ajax({
                url: "http://localhost:26/ecomerce/Imagenes/delete/" + idimg,
                type: "POST",
                success: function() {
                    alert("Eliminado con exito");
                    mostrarDatos();
                }
            });
        });
    });
    //FUNCION PARA MOSTRAR DATOS DE LA TABLA
    function mostrarDatos() {
        $.ajax({
            url: 'http://localhost:26/ecomerce/Imagenes/listaimagenes',
            dataType: 'json',
                beforeSend: function() {
                $('#tablaimagenes').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
            },
            success: function(data) {
                if(data!=""){                
                var tabla = '<table>';
                tabla += '<tr>';
                tabla += '<th>Id</th><th>Imagen</th><th>filename</th><th>Direccion</th><th>Producto</th>';
                tabla += '</tr>';
                $.each(data, function(index, item) {
                    tabla += '<tr>';
                    tabla += '<td>' + item.Imagene.id + '</td>';
                    tabla += '<td><img src="/ecomerce/img/uploads/imagene/filename/' + item.Imagene.filename + '" class="imgtabla" height="100px" width="100px"></td>';
                    tabla += '<td>' + item.Imagene.filename + '</td>';
                    tabla += '<td>' + item.Imagene.dir + '</td>';
                    tabla += '<td>' + item.Producto.producto + '</td>';

                    tabla += '<td><button type="button" class="editar" data-id="' + item.Imagene.id + '">Editar</button></td>';
                    tabla += '<td><button type="button" class="delete" data-id="' + item.Imagene.id + '">Eliminar</button></td>';
                    tabla += '</tr>';
                });
                tabla += '</table>';
                $('#tablaimagenes').html(tabla);
            }else{
             tabla= '<center>No hay imagenes en la base de datos</center>';
                $('#tablaimagenes').html(tabla);
            }
            }
        });
    }
    function llenarlistboxproductos(resp) {
        $.ajax({
            url: 'http://localhost:26/ecomerce/productos/listaproductos',
            dataType: 'json',
            success: function(data) {
                if (resp) {
                    var list = '<select id="select-producto"><option>Seleccione un producto</option>';
                } else if (!resp) {
                    var list = '<select id="select-producto2"><option>Seleccione un producto</option>';
                }
                $.each(data, function(item) {
                    var idPro = data[item].Producto.id;
                    var producto = data[item].Producto.producto;
                    list += '<option value=' + idPro + '>' + producto + '</option>';

                });
                list += '</select>';
                if (resp) {
                    $('#list-producto').html(list);

                } else if (!resp) {
                    $('#list-producto2').html(list);

                }
            }

        });
    }


    /********************************************************************/
//CIERRE IMAGENES
    /********************************************************************/
</script>

<!-- AGREGAR IMAGENES -->
<br><br><hr>
<br>
<center><button  id="adddiv" class="botones">Nueva Imagen</button></center>
<div id="divimagene" title="Nueva Imagen">
    <input type="file" id="imagenefile" name="imagenefile" />
    <p><progress id="prog" value="0" min="0" max="100"></progress></p>
    <div id="respuesta"></div>
    <form id="formimagene" method="POST">
        <input id="filenamehidd"  type="hidden" name="filename">
        <input id="dir" type="hidden" name="dir" value="img\uploads\imagene\filename">
        Producto: <div id="list-producto"></div><br>
        <input id="addproinput" class="fieldform" type="hidden" name="producto_id">
    </form>
    <br><br>
    <button class="subir" type="button" id="subir">Guardar</button>


</div>
<div id="tablaimagenes"></div>

<!--EDITAR CATEGORIAS -->

<div id="editarimagene" title="Editar Imagen">
    <input type="file" id="editimagenefile" name="imagenefile" />
    <p><progress id="progedit" value="0" min="0" max="100"></progress></p>
    <div id="respuesta"></div>
    <form id="formedit" method="POST">
        <input id="editfileinput"  type="hidden" name="filename">
        <input id="editdirinput" type="hidden" name="dir" value="img\uploads\imagene\filename">
        Producto: <div id="list-producto2"></div><br>
        <input id="editproinput" class="fieldform" type="hidden" name="producto_id">
    </form>
    <br><br>
    <button class="subir" type="button" id="editarbutton">Guardar</button>


</div>